<template>
	<view class="classify-video">
		<video class="video" :src="dataObj.video_url" :poster="dataObj.image_url" :initial-time="dataObj.watch_time"
			id="video" show-fullscreen-btn show-loading objectFit="fill" enable-progress-gesture show-mute-btn title
			@play="getVideoId(dataObj.id)" @timeupdate="timeUpdate">
		</video>
		<view class="summary">
			<view class="block">
				<view class="title">{{dataObj.name}}</view>
				<view class="header">视频概述</view>
				<view class="intro" v-html="dataObj.intro || '暂无概述'">{{dataObj.brief || '暂无概述'}}</view>
			</view>
		</view>

		<!-- 底部加入购物车 -->
		<!-- <footer-cart-buy
			:id="dataObj.id"
			:price="dataObj.price">
		</footer-cart-buy> -->
	</view>
</template>

<script>
	import footerCartBuy from '@/components/footer/footer-cart-buy.vue';
	import menuList from '@/components/common/menu-list.vue';

	export default {
		components: {
			footerCartBuy,
			menuList
		},
		data() {
			return {
				default_time: 30, // 默认30秒
				fileId: '',
				dataObj: {
					id: '',
					onclass_id: '',
					price: '0.00',
					video_url: '', // 视频链接
					image_url: '', // 视频封面
					brief: '', // 视频概述
					intro: '',
					watch_time: 0,
					duration: 0
				}
			}
		},
		onLoad(event) {
			this.dataObj['id'] = event['id']; // 获取视频id
			this.getData();
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			});
			// #endif
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 页面关闭卸载
		onUnload() {
			// if(this.dataObj['watch_time'] !== this.dataObj['duration']) {

			// }
			this.postTimeData();
		},
		methods: {
			// 播放进度变化时触发事件
			timeUpdate(event) {
				// 记录播放进度和视频时长
				this.dataObj['watch_time'] = event['detail']['currentTime'];
				if (event['detail']['currentTime'] === event['detail']['duration']) {
					// 播放进度时长等于视频时长，自动提交用户播放时长
					this.postTimeData();
				} else {
					// console.log(this.dataObj['is_buyed'], 'is_buyed')
					if (this.dataObj['is_buyed']) {
						// 已经购买
						this.dataObj['duration'] = event['detail']['duration'];
					} else {
						// 未购买
						if (this.dataObj['watch_time'] > this.default_time) {
							uni.createVideoContext('video').pause();
							uni.showModal({
								title: '温馨提示',
								content: '试看结束，请购买后学习',
								showCancel: false, // 隐藏取消按钮
								success: function(res) {
									// 确认按钮
									if (res.confirm) {
										uni.navigateBack()
									}
								}
							});
						}
					}
				}
			},
			//获取当前播放视频的id
			getVideoId(id, e) {
				let that = this;
				// this.dataObj['watch_time'] = event['detail']['currentTime'];
				// this.fileId = id
				if (that.dataObj['watch_time'] == 0) {
					that.$Requset({
						url: that.$Api['video']['record'],
						data: {
							id: that.dataObj['id'],
						},
						success: (res) => {
							// console.log(res);
						},
						fail: (err) => {}
					})
				}
			},
			// 获取视频数据
			getData() {
				this.$Requset({
					url: this.$Api['video']['detail'],
					data: {
						id: this.dataObj['id']
					},
					success: (res) => {
						const {
							data,
							status
						} = res;
						if (!status) {
							return;
						}
						this.dataObj['onclass_id'] = data['onclass_id'];
						this.dataObj['name'] = data['name'];
						this.dataObj['image_url'] = data['image_url'];
						this.dataObj['video_url'] = data['video_url'];
						this.dataObj['brief'] = data['brief'];
						this.dataObj['intro'] = data['intro'];
						this.dataObj['is_buyed'] = data['is_buyed'];
						this.dataObj['watch_time'] = data['watch_time'] || 0;
						uni.setNavigationBarTitle({
							title: data['name']
						})
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 提交观看视频时长数据
			postTimeData() {
				this.$Requset({
					url: this.$Api['video']['setvideopercent'],
					data: {
						video_id: this.dataObj['id'],
						onclass_id: this.dataObj['onclass_id'],
						watch_time: this.dataObj['watch_time']
					},
					loading: false,
					success: (res) => {},
					fail: (err) => {}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

	.classify-video {
		font-size: 0;

		.video {
			width: 100%;
			height: 336rpx;
			margin: 0;
		}

		.summary {
			padding-bottom: 100rpx;
		}

		// 模块
		.block {
			background-color: #fff;
			margin-bottom: 18rpx;
			padding: 32rpx 36rpx;
			border-radius: 22rpx;

			&:nth-last-child(1) {
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
			}

			.title {
				line-height: 48rpx;
				font-size: 32rpx;
				color: $color-common;
				margin-bottom: .5rem;
				word-wrap: break-word;
			}

			.header {
				line-height: 48rpx;
				font-size: 28rpx;
				color: #1A1A1A;
			}

			// 课程简介内容
			.intro {
				line-height: 48rpx;
				font-size: 28rpx;
				color: #373737;
				padding-top: 12rpx;
			}

			.table {
				// height: 156rpx;
				background-color: #F7F7F7;
				border-radius: 10rpx;
				margin-top: 22rpx;

				.th {
					box-sizing: border-box;
					display: flex;
					height: 52rpx;
					border-bottom: 1rpx solid #EAEFF1;

					&:nth-last-child(1) {
						border-bottom: none;
					}
				}

				.td {
					box-sizing: border-box;
					flex: 1;
					line-height: 50rpx;
					font-size: 22rpx;
					color: #1A1A1A;
					text-align: center;
					border-right: 1rpx solid #EAEFF1;

					&:nth-last-child(1) {
						border-right: none;
					}

					.state {
						width: 32rpx;
						height: 32rpx;
						vertical-align: middle;
					}
				}

				.title {
					color: #7F7F7F;
					word-wrap: break-word;
				}
			}
		}
	}
</style>
